<template>
  <div class="dialog-content">
    <div class="title">
      <span>{{$t('set.update_pwd')}}</span>
    </div>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
      <el-form-item prop="oldpwd">
        <el-input v-model="ruleForm.oldpwd" :placeholder="$t('set.pwd')" type="password"></el-input>
      </el-form-item>
      <small class="info">{{$t('set.pwd_ofyour')}}</small>
      <el-form-item prop="pwd">
        <el-input v-model="ruleForm.pwd" :placeholder="$t('set.new_pwd')" type="password"></el-input>
      </el-form-item>
      <el-form-item prop="repwd">
        <el-input v-model="ruleForm.repwd" :placeholder="$t('set.confirm_pwd')" type="password"></el-input>
      </el-form-item>
      <div class="dialog-footer">
        <el-button type="primary" round @click="submit">{{$t('btn.submit')}}</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { updatePwd } from '@/api';
import { mapMutations, mapActions } from 'vuex';

export default {
  data() {
    const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
    const validatePwd = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error(this.$t('forget.input_pwd')));
      } else if (!reg.test(value.trim())) {
        callback(new Error(this.$t('set.pwd_rule')));
      } else {
        if (this.ruleForm.repwd.trim()) {
          this.$refs.ruleForm.validateField('repwd');
        }
        callback();
      }
    };
    const validateRepwd = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error(this.$t('set.pinput_pwd_confirm')));
      } else if (!reg.test(value.trim())) {
        callback(new Error(this.$t('set.pwd_rule')));
      } else if (this.ruleForm.pwd.trim() !== value.trim()) {
        callback(new Error(this.$t('set.pwd_newpwd')));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        oldpwd: '',
        pwd: '',
        repwd: '',
      },
      rules: {
        oldpwd: [{
          required: true,
          message: this.$t('set.original_pwd'),
          trigger: 'change',
        }],
        pwd: [{ validator: validatePwd, trigger: 'change' }],
        repwd: [{ validator: validateRepwd, trigger: 'change' }],
      },
    };
  },
  methods: {
    ...mapMutations(['CLEAR_ALL']),
    ...mapActions(['Logout']),
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          updatePwd(this.ruleForm).then((res) => {
            if (res.data.status === 1) {
              this.$notify({
                message: this.$t('api.6086'),
                type: 'success',
                duration: 2000,
                showClose: false,
              });
              this.$router.push('/login');
            } else {
              this.$message({
                message: this.$t(`api.${res.data.errcode}`),
                type: 'warning',
              });
            }
          }).catch(() => {
            this.$message.error(this.$t('error.catchError'));
          });
        }
      });
    },
  },
};
</script>
